<!DOCTYPE html>
<html>
<head>
    <title>Projectile Motion Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        const primaryColor = '#000000';
        ctx.strokeStyle = primaryColor;
        ctx.fillStyle = primaryColor;
        ctx.lineWidth = 1.5;

        // Center point and radii
        const centerX = 300;
        const centerY = 270;
        const radiusR = 120; // Moon radius
        const heightH = 40; // Orbit height
        const orbitRadius = radiusR + heightH;
        const outerMostRadius = orbitRadius + 40;

        // --- Draw Circles ---
        ctx.beginPath();
        ctx.arc(centerX, centerY, radiusR, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(centerX, centerY, orbitRadius, 0, 2 * Math.PI);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.arc(centerX, centerY, outerMostRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // --- Draw Points ---
        const pointRadius = 4;

        // Point O (Center)
        const pO = { x: centerX, y: centerY };
        ctx.beginPath();
        ctx.arc(pO.x, pO.y, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Point A (On orbit)
        const pA = { x: centerX + orbitRadius, y: centerY };
        ctx.beginPath();
        ctx.arc(pA.x, pA.y, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Point B (On moon surface)
        const pB = { x: centerX - radiusR, y: centerY };
        ctx.beginPath();
        ctx.arc(pB.x, pB.y, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Point C (Landing on moon)
        const angleC = 140 * Math.PI / 180; // Angle for point C
        const pC = { x: centerX + radiusR * Math.cos(angleC), y: centerY - radiusR * Math.sin(angleC) };
        ctx.beginPath();
        ctx.arc(pC.x, pC.y, pointRadius, 0, 2 * Math.PI);
        ctx.fill();

        // --- Draw Lines ---
        // Dashed horizontal line
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(pB.x, pB.y);
        ctx.lineTo(pA.x, pA.y);
        ctx.stroke();
        
        // Dashed line from O to C
        ctx.beginPath();
        ctx.moveTo(pO.x, pO.y);
        ctx.lineTo(pC.x, pC.y);
        ctx.stroke();
        ctx.restore();

        // --- Draw Trajectories ---
        // Trajectory from A to C (main, thickest)
        ctx.lineWidth = 2.5;
        ctx.beginPath();
        ctx.moveTo(pA.x, pA.y);
        ctx.quadraticCurveTo(pA.x - 100, pA.y - 180, pC.x, pC.y);
        ctx.stroke();

        // Second trajectory (medium thickness)
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(pA.x, pA.y);
        ctx.quadraticCurveTo(pA.x - 70, pA.y - 130, pC.x, pC.y);
        ctx.stroke();
        
        // Third trajectory (thinnest)
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(pA.x, pA.y);
        ctx.quadraticCurveTo(pA.x - 45, pA.y - 90, pC.x, pC.y);
        ctx.stroke();
        ctx.lineWidth = 1.5; // Reset to default

        // --- Draw Brackets and Labels ---
        
        // Function to draw a measurement bracket below a horizontal line
        function drawBracket(x1, y1, x2, label) {
            const bracketY = y1 + 30;
            const tickHeight = 6;
            
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(x1, bracketY - tickHeight);
            ctx.lineTo(x1, bracketY);
            ctx.lineTo(x2, bracketY);
            ctx.lineTo(x2, bracketY - tickHeight);
            ctx.stroke();

            ctx.font = 'italic 22px "Times New Roman"';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText(label, (x1 + x2) / 2, bracketY + 5);
        }

        // Bracket for R
        drawBracket(pB.x, pB.y, pO.x, 'R');

        // Bracket for h
        drawBracket(centerX + radiusR, centerY, pA.x, 'h');

        // --- Draw Text Labels ---
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('O', pO.x + 12, pO.y + 12);
        ctx.fillText('A', pA.x + 15, pA.y);
        ctx.fillText('B', pB.x - 15, pB.y);
        ctx.fillText('C', pC.x - 15, pC.y - 15);

        // --- Draw Caption ---
        ctx.font = '20px "SimSun"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('力图 4.5.1', canvas.width / 2, canvas.height - 10);

    </script>
</body>
</html>